/**
 * @description 新增、编辑企业用户弹窗
 * @author 李艳
 */

import React, {Component} from 'react'
import {Checkbox, Form, Input,Modal} from 'antd';
import {organizationConfig} from "../../../configs/CommonComponentsConfig";
import SelectWithService from "../../../commons/components/SelectWithService";
import TreeSelectWithService from "../../../commons/components/TreeSelectWithService";

const FormItem = Form.Item;

class EditEnterpriseUserModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            confirmLoading: false,
        }
    }

    handleClose = () => {
        this.props.form.resetFields();
    };

    componentDidMount() {
        this.props.onRef(this);

    }
    render() {
        const formItemLayout = {
            labelCol: {
                span: 8
            },
            wrapperCol: {
                span: 12
            },
        };

        const {confirmLoading, modalVisible, handleOk, handleCancel, defaultValue,selectedNode,isAdd} = this.props;
        const {getFieldDecorator} = this.props.form;
        let childId = "";
        let FormValue = defaultValue;
        let title = "编辑员工";
        if (isAdd) {//如果是修改
            title = "新增员工";
            FormValue = {organization: selectedNode}
        }
        return (
            <div>
                <Modal  title={title}
                       visible={modalVisible}
                       onOk={handleOk}
                       onCancel={handleCancel}
                       width={600}
                       afterClose={this.handleClose}
                       confirmLoading={confirmLoading}
                       maskClosable={false}
                >
                    <Form>
                        <FormItem
                            {...formItemLayout}
                            label="组织机构"
                        >
                            {getFieldDecorator('organization.id', {
                                initialValue: FormValue.organization && FormValue.organization.id?FormValue.organization.id:"",
                                rules: [{required: true, message: '请选择组织机构!'}]
                            })(
                                <TreeSelectWithService config={organizationConfig}/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="员工编号">
                            {getFieldDecorator('code', {
                                initialValue: FormValue.code ?FormValue.code:"",
                                rules: [{required: true,
                                  pattern: '^[A-Za-z0-9]{1,10}$',
                                  message: '允许输入字母和数字,且不超过10个字符!'}]
                            })(
                                <Input  disabled={!isAdd}/>   //员工编号不可编辑
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="姓名">
                            {getFieldDecorator('userName', {
                                initialValue: FormValue.user ?FormValue.user.userName:"",
                                rules: [{required: true, message: '请填写姓名!'},{max:20,message:"不超过20个字符"}]
                            })(
                                <Input/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="冻结">
                            {getFieldDecorator('frozen', {
                                initialValue: FormValue.frozen===true,
                                valuePropName: 'checked',
                            })(
                                <Checkbox/>
                            )}
                        </FormItem>
                        {/*以下为隐藏的formItem*/}
                        <FormItem
                            style={{display: "none"}}>
                            {getFieldDecorator('id', {
                                initialValue: FormValue.id ? FormValue.id : "",
                            })(
                                <Input disabled/>
                            )}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}

EditEnterpriseUserModal = Form.create()(EditEnterpriseUserModal);
export default EditEnterpriseUserModal;
